var searchInput = document.getElementById("search-text")

var pageNav = document.getElementsByClassName("page");
var previous = document.getElementById("previous");


var pageItem = document.getElementsByClassName("pageItem");

var next = document.getElementById("next");

pageNav[0].addEventListener("click", function(event){


    var pageNum = pageNav[0].getAttribute("pageNum");


    if(pageNum!="1"){

        pageNav[0].innerHTML = pageNum - 1;
        pageNav[1].innerHTML = pageNum;
        pageNav[2].innerHTML = +pageNum+1;

        pageNav[0].setAttribute("pageNum",pageNum - 1);
        pageNav[1].setAttribute("pageNum",pageNum);
        let endPage = (+pageNum + 1).toString();
        pageNav[2].setAttribute("pageNum",endPage);
    }

    var searchText = previous.getAttribute("searchText");

    axios.get(`/library/searchBooks?searchText=${searchText}&pageNum=${pageNum}`)
        .then(function (response) {
            // 处理成功情况
            console.log(response.data);
            previous.setAttribute("pageNum", pageNum);

            next.setAttribute("pageNum", pageNum);

            var pages=  next.getAttribute("pages");
            var span1 = document.getElementsByClassName("now-page")[0];
            var span2= document.getElementsByClassName("page-number")[0];
            span1.innerHTML = `当前为第${pageNum}页`;
            span2.innerHTML=   `共${pages} 页`;

            var uid = previous.getAttribute("uid");


            history.pushState("","",`http://localhost:8080/library/?searchText=${searchText}&pageNum=${pageNum}`)

            let body = document.getElementById("book-list")
            let str ='';
            for (let book of response.data.list) {
                str+=`<li class="book">
                    <img src="/library/img/book.jpg" alt="">
                    <h2 class="stock">库存剩余:${book.num}</h2>
                    <div class="book-bottom">
                        <div class="book-info">
                            <div class="book-name">${book.name}</div>
                            <div class="book-author">${book.author}</div>
                        </div>
                        <div class="book-todo">
                            <div class="tobookshelf">
                                <a href="/library/user/addMyBooks?bid=${book.bid}&uid=${uid}"  class="acolor">
                                    <i class="iconfont icon-bookshelf"></i>
                                    加入书架
                                </a>
                            </div>
                            <div class="toborrowbook">
                                <a href="/library/user/indexborrowBooks?bid=${book.bid}&uid=${uid}"  class="acolor">
                                    <i class="iconfont icon-yijiechu"></i>
                                    立即借阅
                                </a>
                            </div>
                        </div>
                    </div>
                </li>`
            }
            body.innerHTML=str;
        })
        .catch(function (error) {
            // 处理错误情况
            console.log(error);
        });
    return false;
});

pageNav[1].addEventListener("click", function(event){

    var pageNum = pageNav[1].getAttribute("pageNum");

    var searchText = previous.getAttribute("searchText");
    axios.get(`/library/searchBooks?searchText=${searchText}&pageNum=${pageNum}`)
        .then(function (response) {
            // 处理成功情况
            console.log(response.data);
            previous.setAttribute("pageNum", pageNum);

            next.setAttribute("pageNum", pageNum);

            var pages=  next.getAttribute("pages");
            var span1 = document.getElementsByClassName("now-page")[0];
            var span2= document.getElementsByClassName("page-number")[0];
            span1.innerHTML = `当前为第${pageNum}页`;
            span2.innerHTML=   `共${pages} 页`;

            var uid = previous.getAttribute("uid");

            history.pushState("","",`http://localhost:8080/library/?searchText=${searchText}&pageNum=${pageNum}`)

            let body = document.getElementById("book-list")
            let str ='';
            for (let book of response.data.list) {
                str+=`<li class="book">
                    <img src="/library/img/book.jpg" alt="">
                    <h2 class="stock">库存剩余:${book.num}</h2>
                    <div class="book-bottom">
                        <div class="book-info">
                            <div class="book-name">${book.name}</div>
                            <div class="book-author">${book.author}</div>
                        </div>
                        <div class="book-todo">
                            <div class="tobookshelf">
                                <a href="/library/user/addMyBooks?bid=${book.bid}&uid=${uid}"   class="acolor">
                                    <i class="iconfont icon-bookshelf"></i>
                                    加入书架
                                </a>
                            </div>
                            <div class="toborrowbook">
                                <a href="/library/user/indexborrowBooks?bid=${book.bid}&uid=${uid}"   class="acolor">
                                    <i class="iconfont icon-yijiechu"></i>
                                    立即借阅
                                </a>
                            </div>
                        </div>
                    </div>
                </li>`
            }
            body.innerHTML=str;
        })
        .catch(function (error) {
            // 处理错误情况
            console.log(error);
        });
    return false;
});

pageNav[2].addEventListener("click", function(event){

    var pageNum = pageNav[2].getAttribute("pageNum");

    var pages = next.getAttribute("pages");

    var searchText = previous.getAttribute("searchText");

    if(pageNum!=pages){
        pageNav[0].innerHTML = pageNum - 1;
        pageNav[1].innerHTML = pageNum;
        pageNav[2].innerHTML = +pageNum+1;

        pageNav[0].setAttribute("pageNum",pageNum - 1);
        pageNav[1].setAttribute("pageNum",pageNum);
        let endPage = (+pageNum + 1).toString();
        pageNav[2].setAttribute("pageNum",endPage);
    }

    axios.get(`/library/searchBooks?searchText=${searchText}&pageNum=${pageNum}`)
        .then(function (response) {
            // 处理成功情况
            console.log(response.data);
            previous.setAttribute("pageNum", pageNum);

            next.setAttribute("pageNum", pageNum);

            var pages=  next.getAttribute("pages");
            var span1 = document.getElementsByClassName("now-page")[0];
            var span2= document.getElementsByClassName("page-number")[0];
            span1.innerHTML = `当前为第${pageNum}页`;
            span2.innerHTML=   `共${pages} 页`;
            var uid = previous.getAttribute("uid");

            history.pushState("","",`http://localhost:8080/library/?searchText=${searchText}&pageNum=${pageNum}`)

            let body = document.getElementById("book-list")
            let str ='';
            for (let book of response.data.list) {
                str+=`<li class="book">
                    <img src="/library/img/book.jpg" alt="">
                    <h2 class="stock">库存剩余:${book.num}</h2>
                    <div class="book-bottom">
                        <div class="book-info">
                            <div class="book-name">${book.name}</div>
                            <div class="book-author">${book.author}</div>
                        </div>
                        <div class="book-todo">
                            <div class="tobookshelf">
                                <a href="/library/user/addMyBooks?bid=${book.bid}&uid=${uid}"   class="acolor">
                                    <i class="iconfont icon-bookshelf"></i>
                                    加入书架
                                </a>
                            </div>
                            <div class="toborrowbook">
                                <a href="/library/user/indexborrowBooks?bid=${book.bid}&uid=${uid}"   class="acolor">
                                    <i class="iconfont icon-yijiechu"></i>
                                    立即借阅
                                </a>
                            </div>
                        </div>
                    </div>
                </li>`
            }
            body.innerHTML=str;
        })
        .catch(function (error) {
            // 处理错误情况
            console.log(error);
        });
    return false;
});






previous.addEventListener("click",function (event){


    var pageNum2 = previous.getAttribute("pageNum");


    var pageNum = pageNum2;
    if(pageNum2=="1"){
        pageNum=1;

    }else if(pageNum2=="2"){
        pageNum = pageNum2-1;
        pageNav[0].innerHTML = "1";
        pageNav[1].innerHTML = "2";
        pageNav[2].innerHTML = "3";

        pageNav[0].setAttribute("pageNum","1");
        pageNav[1].setAttribute("pageNum","2");
        pageNav[2].setAttribute("pageNum","3");
    }else{
        pageNum = pageNum2-1;
        pageNav[0].innerHTML = pageNum - 1;
        pageNav[1].innerHTML = pageNum;
        pageNav[2].innerHTML = +pageNum+1;

        pageNav[0].setAttribute("pageNum",pageNum - 1);
        pageNav[1].setAttribute("pageNum",pageNum);
        let endPage = (+pageNum + 1).toString();
        pageNav[2].setAttribute("pageNum",endPage);
    }

    var searchText = previous.getAttribute("searchText");
    //更新数据
    axios.get(`/library/searchBooks?searchText=${searchText}&pageNum=${pageNum}`)
        .then(function (response) {


            // 处理成功情况
            console.log(response.data);

            previous.setAttribute("pageNum", pageNum);

            next.setAttribute("pageNum", pageNum);

            var pages=  next.getAttribute("pages");
            var span1 = document.getElementsByClassName("now-page")[0];
            var span2= document.getElementsByClassName("page-number")[0];
            span1.innerHTML = `当前为第${pageNum}页`;
            span2.innerHTML=   `共${pages} 页`;
            var uid = previous.getAttribute("uid");

            history.pushState("","",`http://localhost:8080/library/?searchText=${searchText}&pageNum=${pageNum}`)

            let body = document.getElementById("book-list")
            let str ='';
            for (let book of response.data.list) {
                str+=`<li class="book">
                    <img src="/library/img/book.jpg" alt="">
                    <h2 class="stock">库存剩余:${book.num}</h2>
                    <div class="book-bottom">
                        <div class="book-info">
                            <div class="book-name">${book.name}</div>
                            <div class="book-author">${book.author}</div>
                        </div>
                        <div class="book-todo">
                            <div class="tobookshelf">
                                <a href="/library/user/addMyBooks?bid=${book.bid}&uid=${uid}"   class="acolor">
                                    <i class="iconfont icon-bookshelf"></i>
                                    加入书架
                                </a>
                            </div>
                            <div class="toborrowbook">
                                <a href="/library/user/indexborrowBooks?bid=${book.bid}&uid=${uid}"   class="acolor">
                                    <i class="iconfont icon-yijiechu"></i>
                                    立即借阅
                                </a>
                            </div>
                        </div>
                    </div>
                </li>`
            }
            body.innerHTML=str;
        })
        .catch(function (error) {
            // 处理错误情况
            console.log(error);
        });
    return false;
});


next.addEventListener("click",function (event){


    var pageNum3 = next.getAttribute("pageNum");
    var pages=  next.getAttribute("pages");
    var pageNum = pageNum3;

    if(pages==1){
        pageNav[0].innerHTML = "1";
        pageItem[1].style.display= "none";
        pageItem[2].style.display="none";
    }else if(pages==2 ){
        if(pageNum==1){
            pageNum = +pageNum3 + 1;
        }
        pageNav[0].innerHTML = "1";
        pageNav[1].innerHTML = "2";
        pageItem[2].style.display = "none";
    }else if(pageNum3==pages || pageNum3==pages-1){
        pageNum= pages;
        pageNav[0].innerHTML = pageNum - 2;
        pageNav[1].innerHTML = pageNum-1;
        pageNav[2].innerHTML = pageNum;

        pageNav[0].setAttribute("pageNum",pageNum - 2);
        pageNav[1].setAttribute("pageNum",pageNum-1);
        pageNav[2].setAttribute("pageNum",pageNum);
    } else{
        pageNum = +pageNum3 + 1;

        pageNav[0].innerHTML = pageNum - 1;
        pageNav[1].innerHTML = pageNum;
        pageNav[2].innerHTML = +pageNum+1;

        pageNav[0].setAttribute("pageNum",pageNum - 1);
        pageNav[1].setAttribute("pageNum",pageNum);
        let endPage = (+pageNum + 1).toString();
        pageNav[2].setAttribute("pageNum",endPage);

    }
    var searchText = previous.getAttribute("searchText");
    //更新数据
    axios.get(`/library/searchBooks?searchText=${searchText}&pageNum=${pageNum}`)
        .then(function (response) {
            // 处理成功情况
            console.log(response.data);
            next.setAttribute("pageNum",pageNum);
            previous.setAttribute("pageNum",pageNum);
            var span1 = document.getElementsByClassName("now-page")[0];
            var span2= document.getElementsByClassName("page-number")[0];
            span1.innerHTML = `当前为第${pageNum}页`;
            span2.innerHTML=   `共${pages} 页`;
            var uid = previous.getAttribute("uid");

            history.pushState("","",`http://localhost:8080/library/?searchText=${searchText}&pageNum=${pageNum}`)

            let body = document.getElementById("book-list")
            let str ='';
            for (let book of response.data.list) {
                str+=`<li class="book">
                    <img src="/library/img/book.jpg" alt="">
                    <h2 class="stock">库存剩余:${book.num}</h2>
                    <div class="book-bottom">
                        <div class="book-info">
                            <div class="book-name">${book.name}</div>
                            <div class="book-author">${book.author}</div>
                        </div>
                        <div class="book-todo">
                            <div class="tobookshelf">
                                <a href="/library/user/addMyBooks?bid=${book.bid}&uid=${uid}"   class="acolor">
                                    <i class="iconfont icon-bookshelf"></i>
                                    加入书架
                                </a>
                            </div>
                            <div class="toborrowbook">
                                <a href="/library/user/indexborrowBooks?bid=${book.bid}&uid=${uid}"   class="acolor">
                                    <i class="iconfont icon-yijiechu"></i>
                                    立即借阅
                                </a>
                            </div>
                        </div>
                    </div>
                </li>`
            }
            body.innerHTML=str;
        })
        .catch(function (error) {
            // 处理错误情况
            console.log(error);
        });
    return false;
});


//发送axios请求方式
searchInput.addEventListener("keydown",function (event){
    if(event.key=="Enter"){
        var searchText = searchInput.value;


        pageItem[0].style.display= "block";
        pageItem[1].style.display= "block";
        pageItem[2].style.display="block";



        axios.get(`/library/searchBooks?searchText=${searchText}`)
            .then(function (response) {
                // 处理成功情况



                if(response.data.pages==1){
                    pageNav[0].innerHTML = "1";
                    pageItem[1].style.display= "none";
                    pageItem[2].style.display="none";
                }else if(response.data.pages==2){
                    pageNav[0].innerHTML = "1";
                    pageNav[1].innerHTML = "2";
                    pageItem[2].style.display = "none";
                }else{
                    pageNav[0].innerHTML = "1";
                    pageNav[1].innerHTML = "2";
                    pageNav[2].innerHTML = "3";
                }


                previous.setAttribute("searchText",searchText);


                next.setAttribute("pages",response.data.pages);


                next.setAttribute("pageNum",response.data.pageNum);

                previous.setAttribute("pageNum",response.data.pageNum);

                var span1 = document.getElementsByClassName("now-page")[0];
                var span2= document.getElementsByClassName("page-number")[0];
                span1.innerHTML = `当前为第${response.data.pageNum}页`;
                span2.innerHTML=   `共${response.data.pages} 页`;
                var uid = previous.getAttribute("uid");

                history.pushState("","",`http://localhost:8080/library/?searchText=${searchText}`)

                let body = document.getElementById("book-list")
                let str ='';
                for (let book of response.data.list) {
                    str+=`<li class="book">
                    <img src="/library/img/book.jpg" alt="">
                    <h2 class="stock">库存剩余:${book.num}</h2>
                    <div class="book-bottom">
                        <div class="book-info">
                            <div class="book-name">${book.name}</div>
                            <div class="book-author">${book.author}</div>
                        </div>
                        <div class="book-todo">
                            <div class="tobookshelf">
                                <a href="/library/user/addMyBooks?bid=${book.bid}&uid=${uid}"    class="acolor">
                                    <i class="iconfont icon-bookshelf"></i>
                                    加入书架
                                </a>
                            </div>
                            <div class="toborrowbook">
                                <a href="/library/user/indexborrowBooks?bid=${book.bid}&uid=${uid}"  class="acolor">
                                    <i class="iconfont icon-yijiechu"></i>
                                    立即借阅
                                </a>
                            </div>
                        </div>
                    </div>
                </li>`
                }
                body.innerHTML=str;
            })
            .catch(function (error) {
                // 处理错误情况
                console.log(error);
            });
    }
});





//发送普通请求方式
/*searchInput.addEventListener('keydown', function(event){
    if(event.key=="Enter") {
        var searchText = searchInput.value;
        // alert(searchText)
        // location.href = `http://localhost:8080/library/searchBooks?searchText=${searchText}`;
        location.href = `http://localhost:8080/library/?searchText=${searchText}`;

    }
});*/
